<template>
  <div>
    <el-form :model="user" style="width: 400px;padding-top: 50px;padding-left: 220px" status-icon :rules="rules" ref="user" label-width="200px" class="demo-user">
      <el-form-item label="用户编号" prop="account">
        <el-input v-model="user.accountId" :disabled="true" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="电话号码" prop="phone">
        <el-input v-model="user.phone" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('user')">修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import userApi from '@/api/personal/user'
export default {
  name: 'informationChange',
  data () {
    // 验证手机号
    var checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
      if (!value) {
        return callback(new Error('电话号码不能为空'))
      }
      setTimeout(() => {
        // Number.isInteger是es6验证数字是否为整数的方法,实际输入的数字总是识别成字符串
        // 所以在前面加了一个+实现隐式转换
        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (phoneReg.test(value)) {
            callback()
          } else {
            callback(new Error('电话号码格式不正确'))
          }
        }
      }, 100)
    }
    return {
      user: {
        accountId: this.$store.state.accountId, // 用户编号
        phone: '' // 用户手机号
      },
      rules: { // 表单验证规则
        phone: [
          { validator: checkPhone, trigger: 'blur' }
        ]
      },
      checked: true
    }
  },
  methods: {
    /**
     * 修改按钮点击事件，通过传user对象给api来修改电话号码
     * @param formName 表单名
     */
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          userApi.changeInformation(this.user).then(
            this.$message({
              type: 'success',
              message: '修改成功'})
          )
        } else {
          this.$message({
            type: 'error',
            message: '请填写正确的格式'})
        }
      })
    }
  },
  // 创建页面时通过传用户编号给api来获取用户电话号码
  created () {
    userApi.getPhone(this.$store.state.accountId).then(res => {
      this.user.phone = res.data.phone
    }
    )
  }
}
</script>

<style scoped>

</style>
